<script setup lang="ts">
import { nextTick, onMounted, ref } from "vue";
import { HtmlPoint, Viewer } from "@jodvf/cesium-3d";
import { useCesiumViewer } from "@/hooks/cesium";
import {
  toggleTerrain,
  addTdtCia,
  getCartesian,
  transformCartesianToWGS84,
} from "./utils/gisCommon";
import {
  Cartesian3,
  Cesium3DTileset,
  Color,
  defined,
  ScreenSpaceEventHandler,
  ScreenSpaceEventType,
} from "joCesium";

import Dialog from "./components/Dialog.vue";
let viewer: Viewer;

const modelUrl = "http://117.172.141.173:6090/3dtiles/jinkai2/tileset.json";
const addModel = async () => {
  const tileset = await Cesium3DTileset.fromUrl(modelUrl);
  viewer.scene.primitives.add(tileset);
  viewer.flyTo(tileset);
  addEvent();
};
const drawOutline = (feature: any) => {
  const originalColor = feature.color; // 保存原色

  // 设置轮廓
  feature.silhouetteColor = Color.RED;
  feature.silhouetteSize = 2.0; // 轮廓宽度

  // 恢复原色或设置其他效果
  setTimeout(() => {
    feature.silhouetteColor = Color.TRANSPARENT;
  }, 2000); // 轮廓显示时间
};

let htmlPoint: HtmlPoint;
const dialogRef = ref();
const addEvent = () => {
  htmlPoint = new HtmlPoint(viewer);
  viewer.screenSpaceEventHandler.setInputAction(
    (movement: ScreenSpaceEventHandler.PositionedEvent) => {
      // const pickedFeature = viewer.scene.pick(movement.position);
      if (movement.position) {
        const positions = getCartesian(movement.position, viewer);
        const position = transformCartesianToWGS84(positions);
        console.log(dialogRef.value);
        const dom = document.querySelector(".dialog");
        htmlPoint.render({
          html: dom as HTMLElement,
          position: Cartesian3.fromDegrees(position.x, position.y, position.z),
          name: "info-dialog",
          offsetX: 24,
          offsetY: 24,
        });
      }
    },
    ScreenSpaceEventType.LEFT_CLICK
  );
};
const SiteInfo = ref({
  longitude: 0,
  latitude: 0,
  height: 0,
});
onMounted(() => {
  viewer = useCesiumViewer("map");
  toggleTerrain(viewer, true);
  // addTdtCia(viewer);
  addModel();
});
</script>

<template>
  <div>
    <div id="map"></div>
    <Dialog ref="dialogRef" class="dialog" :SiteInfo="SiteInfo" />
  </div>
</template>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
.dialog {
  display: none;
}
</style>
